<template>

    <table>
        <tr>
            <th>门店名称</th>

            <th>
                <input type="text" placeholder="请输入门店名称" v-model="info.Shop_Name">
            </th>
        </tr>
        <tr>
            <th>门店分店名称</th>

            <th>
                <input type="text" placeholder="请输入门店分店名称" v-model="info.Shop_BranchName">
            </th>
        </tr>
        <tr>
            <th>门店地址：</th>

            <th>
                <input type="text" placeholder="请输入门店地址：" v-model="info.Shop_Address">
            </th>
        </tr>
        <tr>
            <th>门店电话</th>

            <th>
                <input type="text" placeholder="请输入门店电话" v-model="info.Shop_Phone">
            </th>
        </tr>
        <tr>
            <th>门店状态</th>

            <th>
                <input type="radio" :value="true" v-model="info.Shop_State">营业中
                <input type="radio" :value="false" v-model="info.Shop_State">休息中
            </th>
        </tr>
        <tr>
            <th>门店介绍</th>

            <th>
                <textarea cols="20" rows="4" placeholder="请输入门店介绍" v-model="info.Shop_Info"></textarea>
            </th>
        </tr>
        <tr>
            <th>入住须知</th>

            <th>
                <input type="text" placeholder="请输入入住须知" v-model="info.Shop_Notice">
            </th>
        </tr>

        <tr>
            <th>交通信息</th>

            <th>
                <textarea cols="20" rows="4" placeholder="请输入交通信息" v-model="info.Shop_Traffic"></textarea>
            </th>
        </tr>

        <tr>
            <th>门头图片</th>

            <th>
                <img :src="info.Shop_Img" style="width: 100px; height:110px;">
                <input type="file" @change="FileUpLoads">
            </th>
        </tr>

        <tr>
            <th>创建时间</th>

            <th>
                <input type="date"  v-model="info.Shop_Date">
            </th>
        </tr>


        <tr>
            <th></th>

            <th colspan="2" style="text-align: center;">
                <input type="button" value="添加" @click="AddMe">
            </th>
        </tr>

    </table>




</template>

<script setup lang="ts">

import { onMounted, ref } from 'vue'

import axios from 'axios';


import { useRouter, createRouter ,useRoute} from 'vue-router';


 



///实现图片上传功能
const FileUpLoads = (e: any) => {
    //1.获取文件对象,将事件对象中的target属性file列表中的第一个文件赋值给属性

    var file = e.target.files[0]
    ///创建一个FormData数据对象  表单数据对象
    var fd = new FormData();
    ///3将文件对象添加到表单数据对象当中 append (); 保存方法 存储数据方式通过键值对形式保存

    fd.append("image",file)

    ///使用axios发送请求

    axios.post(  'https://localhost:7035/api/File/UpLoads' ,fd).then(res => {

 
        if(res.data.Comm_Code==-1)
    {
        alert(res.data.Comm_Msg)
    }
   else  if(res.data.Comm_Code==-2)
    {
        alert(res.data.Comm_Msg)
    }
    else if(res.data.Comm_Code==1)
    {
        info.value.Shop_Img = res.data.Comm_Path
    }
    
      
    })
        .catch(error => {

            console.log(error)
        })

}

const info = ref({
    Shop_Name: "",
    Shop_BranchName:"",
    Shop_Address: "",
    Shop_Phone: "",
    Shop_State: true,
    Shop_Info: "",
    Shop_Notice: "",
    Shop_Traffic: "",
    Shop_Img: "",
    IsDel: true,
     Shop_Date: ""
})




const AddMe = () => {

 
    axios.post('https://localhost:7035/api/Shop/AddShop',info.value).then(res => {

        if (res.data > 0) {
            alert('添加成功')
        }
        else if(res.data==-1)
        {
            alert('商店重复')
        }
        else {
            alert('添加失败')
        }
    })

}


 
</script>